<style lang="less" scoped>
    .customer {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        .ivu-input{
            width: 85%;
        }
    }
</style>
<template>
    <div class="customer">
        <card-table
            cardtitle="客户列表"
            addbuttext="添加客户"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            :data="customerdata">
        </card-table>
        <Modal
            v-model="addcustomer"
            title="添加客户"
            :loading="loading"
            @on-cancel="customerclose('customerForm')"
            @on-ok="addcustomerclick('customerForm')">
            <Form :model="customerForm" :label-width="120" ref="customerForm" :rules="customerRule">
                <FormItem label="客户编号：" prop="nub">
                    <base-input v-model="customerForm.nub" placeholder="请输入客户编号"></base-input>
                </FormItem>
                <FormItem label="客户名称：" prop="name">
                    <base-input v-model="customerForm.name" placeholder="请输入客户名称"></base-input>
                </FormItem>
                <FormItem label="客户地址：">
                    <address-input v-model="customerForm.address" placeholder="请输入客户地址"></address-input>
                </FormItem>
                <FormItem label="采购员名称：">
                    <base-input v-model="customerForm.peoplename" placeholder="请输入采购员名称"></base-input>
                </FormItem>
                <FormItem label="采购员联系方式：">
                    <base-input v-model="customerForm.peoplephone" placeholder="请输入采购员联系方式"></base-input>
                </FormItem>
                <FormItem label="采购员收货地址：">
                    <address-input v-model="customerForm.peopleaddress" placeholder="请输入采购员收货地址"></address-input>
                </FormItem>
                <FormItem label="机种信息：">
                    <address-input v-model="customerForm.machine" placeholder="请输入机种信息,多个机种使用,隔开"></address-input>
                </FormItem>
                <!--<template>
                    <FormItem label="机种信息：" v-for="(machine, index) in customerForm.machine" :key="index">
                        <base-input v-model="customerForm.machine[index]" placeholder="请输入机种信息"></base-input>
                    </FormItem>
                    <div style="width: 100%;text-align: right">
                        <Button type="text" style="margin-right: 150px" @click="addmachine">添加机种</Button>
                    </div>
                </template>-->
            </Form>
        </Modal>
        <Modal
            v-model="updateCustomer"
            title="修改客户信息"
            :loading="updateLoading"
            @on-cancel="updateCustomerClose('updateCustomerForm')"
            @on-ok="updateCustomerClick('updateCustomerForm')">
            <Form :model="updateCustomerForm" :label-width="120" ref="updateCustomerForm" :rules="updateCustomerRule">
                <FormItem label="客户编号：" prop="nub">
                    <Input v-model="updateCustomerForm.nub" placeholder="请输入客户编号" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="客户名称：" prop="name">
                    <Input v-model="updateCustomerForm.name" placeholder="请输入客户名称" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="客户地址：">
                    <Input v-model="updateCustomerForm.address" type="textarea" placeholder="请输入客户地址" :maxlength="80" style="width: 80%"></Input>
                </FormItem>
                <FormItem label="采购员名称：">
                    <Input v-model="updateCustomerForm.peoplename" placeholder="请输入采购员名称" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="采购员联系方式：">
                    <Input v-model="updateCustomerForm.peoplephone" placeholder="请输入采购员联系方式" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="采购员收货地址：">
                    <Input v-model="updateCustomerForm.peopleaddress" type="textarea" placeholder="请输入采购员收货地址" :maxlength="80" style="width: 80%"></Input>
                </FormItem>
                <FormItem label="机种信息：">
                    <Input v-model="updateCustomerForm.machine" type="textarea" placeholder="请输入机种信息,多个机种使用,隔开" :maxlength="80" style="width: 80%"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    export default {
        name: 'customer',
        data () {
            return {
                role: false,
                addcustomer: false, //  添加客户模态框
                customerForm: {
                    nub: '',
                    name: '',
                    address: '',
                    peoplename: '',
                    peoplephone: '',
                    peopleaddress: '',
                    machine: ''
                },
                customerRule: {
                    nub: this.rule.noNull('客户编号不能为空'),
                    name: this.rule.noNull('客户名称不能为空')
                },
                loading: true,  /*-------*/
                updateCustomer: false, //  编辑客户模态框
                updateCustomerForm: {
                    nub: '',
                    name: '',
                    address: '',
                    peoplename: '',
                    peoplephone: '',
                    peopleaddress: '',
                    machine: ''
                },
                updateCustomerRule: {
                    nub: this.rule.noNull('客户编号不能为空'),
                    name: this.rule.noNull('客户名称不能为空')
                },
                updateLoading: true,    /*-------*/
                columns: [
                    {
                        title: '编号',
                        key: 'nub',
                        width: 150
                    },
                    {
                        title: '名称',
                        key: 'name',
                        width: 130
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '联系人姓名',
                        key: 'peoplename',
                        width: 130
                    },
                    {
                        title: '联系电话',
                        key: 'peoplephone',
                        width: 150
                    },
                    {
                        title: '收货地址',
                        key: 'peopleaddress'
                    },
                    {
                        title: '机种',
                        key: 'machine',
                        width: 80,
                        render: (h, params) => {
                            let data = []
                            for (let i = 0; i < params.row.machine.length; i++) {
                                data.push(h('p','机种:' + params.row.machine[i]))
                            }
                            return h('Poptip', {
                                props: {
                                    trigger: 'hover',
                                    placement: 'left'
                                }
                            }, [
                                h('Tag', params.row.machine.length),
                                h('div', {
                                    slot: 'content'
                                }, data)
                            ])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('div', {
                                style: {
                                    display: 'flex',
                                    justifyContent: 'center'
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            this.addcustomer = true
                                            this.$set(this.customerForm, 'nub', params.row.nub)
                                            this.$set(this.customerForm, 'name', params.row.name)
                                            this.$set(this.customerForm, 'address', params.row.address)
                                        }
                                    }
                                }, '添加采购员'),
                                h('Button', {
                                    props: {
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        'click': () => {
                                            if (!this.role) {
                                                this.$Notice.error({
                                                    title: '权限不足!',
                                                    desc: ''
                                                });
                                                return
                                            }
                                            this.updateCustomer = true
                                            this.$set(this.updateCustomerForm, 'nub', params.row.nub)
                                            this.$set(this.updateCustomerForm, 'name', params.row.name)
                                            this.$set(this.updateCustomerForm, 'address', params.row.address)
                                            this.$set(this.updateCustomerForm, 'peoplename', params.row.peoplename)
                                            this.$set(this.updateCustomerForm, 'peoplephone', params.row.peoplephone)
                                            this.$set(this.updateCustomerForm, 'peopleaddress', params.row.peopleaddress)
                                            let machine = ''
                                            for (let i in params.row.machine) {
                                                machine += params.row.machine[i] + ','
                                            }
                                            this.$set(this.updateCustomerForm, 'machine', machine)
                                            this.editId = params.row.id
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],  //  表格列
                customerdata: [
                ],  //  表格数据
                selectList: [
                    {
                        label: '编号',
                        value: 'nub'
                    },
                    {
                        label: '名称',
                        value: 'name'
                    },
                    {
                        label: '地址',
                        value: 'address'
                    },
                    {
                        label: '采购员姓名',
                        value: 'peoplename'
                    },
                    {
                        label: '联系方式',
                        value: 'peoplephone'
                    },
                    {
                        label: '收货地址',
                        value: 'peopleaddress'
                    },
                    {
                        label: '机种',
                        value: 'machine'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'name',  //  搜索下拉列表默认值
                searchForm: {
                    'nub': '',
                    'name': '',
                    'address': '',
                    'peoplename': '',
                    'peoplephone': '',
                    'peopleaddress': '',
                    'machine': ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '编号',
                        key: 'nub',
                        placeholder: '输入客户编号'
                    },
                    {
                        label: '名称',
                        key: 'name',
                        placeholder: '输入客户名称'
                    },
                    {
                        label: '地址',
                        key: 'address',
                        placeholder: '输入客户地址'
                    },
                    {
                        label: '采购员姓名',
                        key: 'peoplename',
                        placeholder: '输入采购人姓名'
                    },
                    {
                        label: '联系方式',
                        key: 'peoplephone',
                        placeholder: '输入联系方式'
                    },
                    {
                        label: '收货地址',
                        key: 'peopleaddress',
                        placeholder: '输入收货地址'
                    },
                    {
                        label: '机种',
                        key: 'machine',
                        placeholder: '输入机种'
                    }
                ],  //  搜索表单item
                editId: ''
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addcustomer = true
            },
            customerclose (name) {
                this.$refs[name].resetFields();
                this.customerForm = {
                    nub: '',
                    name: '',
                    address: '',
                    peoplename: '',
                    peoplephone: '',
                    peopleaddress: '',
                    machine: ''
                }
            },
            refresh () {
                this.http.getAllCustomer(this, {})
            },
            addmachine () {
                this.customerForm.machine.push('')
            },
            updateCustomerClose (name) {
                this.$refs[name].resetFields();
                for (let item in this.updateCustomerForm) {
                    this.$set(this.updateCustomerForm, item, '')
                }
            },
            updateCustomerClick (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.http.editCustomer(this, this.updateCustomerForm, this.editId, name)
                    } else {
                        this.updateLoading = false
                        setTimeout(() => {
                            this.updateLoading = true
                        }, 100)
                    }
                })
            },
            addcustomerclick (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.http.addCustomer(this, this.customerForm, name)
                    } else {
                        this.loading = false
                    }
                })
                setTimeout(() => {
                    this.loading = true
                }, 300)
            }
        },
        components: {
            CardTable
        },
        mounted: function () {
            this.http.getAllCustomer(this, {})
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '21'
            }) ? true : false
        }
    };
</script>
